<!--
 * @Author: zcc
 * @Date: 2021-08-30 10:59:33
 * @LastEditors: Please set LastEditors
 * @Description: 生命周期
 * @FilePath: /workProject/vue3/vue3Learn/vue3-learn/src/views/Study/life.vue
-->
<template>
  <div class="container">
    <h1>什么是Composition API</h1>
    <p>如果你还不知道，Vue3 Composition API 附带了一个 setup() 方法。此方法封装了我们的大多数组件代码，并处理了响应式，生命周期钩子函数等</p>

    <p>简而言之，Composition API使我们能够更好地将代码组织为更多的模块化功能，而不是根据属性的类型（方法，计算的数据）进行分离。</p>

    <div>1.在旧的 beforeCreate 钩子函数之后和 created 的钩子函数之前立即调用 setup 方法</div>
    <div>2.除去 beforeCreate 和 created 之外，在我们的 setup 方法中，有9个旧的生命周期钩子，我们可以在setup 方法中访问</div>
    <ol>
      <li>onBeforeMount</li>
      <li>onMounted</li>
      <li>onBeforeUpdate</li>
      <li>onUpdated</li>
      <li>onUnmounted</li>
      <li>onActivated</li>
      <li>onDeactivated</li>
      <li>onErrorCaptured</li>
    </ol>
    <h1>setup函数,beforeCreate() 之后 created() 之前</h1>
    <p>setup() 函数 ， 专门为属性所提供的新属性，它为Vue3的 Composition API 新特性提供了统一的入口</p>
    <div>setup() 函数会有两个参数</div>
    <p>setup()函数的第一个参数是一个对象 可以获取到属性传值的值 – 前提是必须在Vue组件里的props对象上先声明一些才能获取的到</p>
    <p>setup()函数的第二个参数是 ctx 上下文对象 这个概念和koa有点类似 可以一次获取我们平时需要使用 this 才能获取到的一些对象数据</p>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
export default {
  name: "life",
  setup() {
    const state = reactive({});
    onMounted(() => {});
    return {
      ...toRefs(state)
    };
  }
};
</script>

<style lang="scss" scoped>
</style>

